<template>
  <div class="Layout">
    <div class="Head Border-Bottom">transition</div>
    <div class="Body">
      <div>
        transition是transition-property、transition-duration、transition-timing-function、transition-delay属性的简写，作用是使得CSS属性变化具有渐变效果。
      </div>
      <div class="Code Section">transition: &lt;property-name&gt; &lt;duration&gt; [timing-function] [delay]</div>
      <ul class="List">
        <li>多组属性可以用逗号组合。</li>
        <li>property-name可以使用关键词all和none，表示所有属性和无属性。</li>
        <li>可用于渐变动画的目标属性见：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties"
            target="_blank">Animatable CSS properties</a></li>
      </ul>
    </div>
    <div class="Site">
      <div>参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition</div>
    </div>
  </div>
</template>